<?php
/**
 * Created by PhpStorm.
 * User: home
 * Date: 2019/2/24
 * Time: 16:32
 */
header('Content-Type:text/html;charset=utf-8');
?>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            margin: 0px auto;
            height: auto;
            max-width: 860px;
            margin: 0px auto;
            word-break: normal;
            word-wrap: break-word;
            position: relative;
            white-space: normal;
            overflow-x: visible;
        }

        .row {
            margin: 3px 0;
            background: url(dot-1.png) repeat-x center transparent;
            background-size: 6px 2px;
        }

        .row:after {
            content: ' ';
            display: block;
            clear: both;
            width: 100%;
        }

        .row span {
            display: inline-block;
            background-color: #fff;
            line-height: 25px;
        }

        .dot {
            height: 25px;
            /*flex: 1;*/
            /*background-color: #f00 !important;*/
        }

        .cp-title {
            float: left;
            min-width: inherit;
            padding-right:12px;
            margin-left: -2px;
        }

        .cls-1 {
            font-weight: bold;
        }

        .cls-2 {
            text-indent: 2em;
        }

        .page-number {
            float: right;
            width: 20px;
            padding-left:6px;
        }
        .mulu-title{
            text-align: center;
            margin: 20px 0 30px;
        }
        .mulu-title .title{
            background-color: #eeeeee;
            display: inline-block;
            padding: 4px 12px;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="mulu-title">
        <span class="title">目录</span>
    </div>
    <?php
    $mulu = file_get_contents('mulu.txt');
    if ($mulu) {
        $mulu_array = explode("\n", $mulu);
        foreach ($mulu_array as $row) {
            echo "<div class='row'>";
            echo '<span class="cp-title cls-' . (substr($row, 0, 1) == '>' ? '2' : '1') . '">';
            $row = explode('$$', str_replace('>', '', $row));

            echo $row[0] . '</span>';
            echo '<span class="dot"></span><span class="page-number">' . $row[1] . '</span>';
            echo "</div>\n";
        }
    }
    ?>
</div>
<script>
    const rows = document.querySelectorAll('.row');
    const rowWidth = rows[0].offsetWidth;
    rows.forEach((r, i) => {
        let cols = r.querySelectorAll('span');
        // cols[1].style.width = (rowWidth - cols[0].offsetWidth - cols[2].offsetWidth-20) + 'px';
        // cols[1].innerHTML = rowWidth + '-' + cols[0].offsetWidth + '-' + cols[2].offsetWidth + 'px';
    })
</script>
</body>
</html>